<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./demo.css">
    <title>Document</title>
</head>

<body>
    <div class="bigBox">
        <!-- ============== 左边 ==============-->
        <div class="left">
            <!-- 左边顶部第一个盒子 -->
            <div class="left_top">
                <!--  -->
                <div class="left_item_p">当前对比数据</div>
                <h1>3,456,789</h1>
            </div>

            <div class="left_item2">违法犯罪人员分析</div>
            <!-- 左边中间图饼 -->
            <div class="left_item3"></div>
            <div class="left_item2">入口出入记录</div>
            <!-- 左边下间表格 -->
            <div class="left_item4">
                <ul class="ul_top">
                    <li>姓名</li>
                    <li>角色</li>
                    <li>开门方式</li>
                    <li>时间</li>
                </ul>
                <ul class="ul_item">
                    <li>张梦</li>
                    <li>访客</li>
                    <li>人脸</li>
                    <li>2018-11-01</li>
                </ul>
                <ul class="ul_item">
                    <li>张梦</li>
                    <li>访客</li>
                    <li>人脸</li>
                    <li>2018-11-01</li>
                </ul>
                <ul class="ul_item">
                    <li>张梦</li>
                    <li>业主</li>
                    <li>人脸</li>
                    <li>2018-11-01</li>
                </ul>
                <ul class="ul_item">
                    <li>张梦</li>
                    <li>访客</li>
                    <li>人脸</li>
                    <li>2018-11-01</li>
                </ul>
                <ul class="ul_item">
                    <li>张梦</li>
                    <li>业主</li>
                    <li>人脸</li>
                    <li>2018-11-01</li>
                </ul>
            </div>
        </div>
        <div class="left_img"></div>
        <!-- ============== 中间 ==============-->
        <div class="conten">
            <!-- 顶部名称 -->
            <div class="conten_item1">
                <img src="./素材图/police.ico" alt="">
                <span>智慧社区内网对比平台</span>
            </div>

            <!-- 天气栏 -->
            <div class="conten_item2">
                <div class="conten_item2_left">
                    <div class="conten_item2_left_a">
                        <p>16:19:50</p>
                        <span>2020/1/21 pm 周2</span>
                    </div>
                    <div class="conten_item2_left_b"></div>
                    <div class="conten_item2_left_c">
                        <img src="./素材图/weather/weather_img01.png" alt="">
                        <section>
                            <p>多云</p>
                            <p>16-22°C</p>
                            <p>天津市和平区</p>
                        </section>
                    </div>
                </div>
                <div class="conten_item2_img"></div>
                <div class="conten_item2_right">
                    <p class="conten_item2_right_a">NO.1北京：2543289人</p>
                    <p class="conten_item2_right_b">NO.1天津：5690人</p>
                    <p class="conten_item2_right_c">NO.1河北：456人</p>
                </div>
            </div>

            <!-- 犯罪人口 -->
            <div class="conten_item3">犯罪人口来源分析</div>
            <!-- 地图 -->
            <div class="conten_item4"></div>


            <!-- line-blue.png -->
        </div>
        <div class="right_img"></div>
        <!-- ============== 右边 ==============-->
        <div class="right">
            <div class="right_item1">违法犯罪人员年龄分析</div>
            <!-- 右边顶部图饼 -->
            <div class="right_item2"></div>
            <div class="right_item1">违法犯罪人员地区分布</div>
            <!-- 右边中间柱形图 -->
            <div class="right_item3"></div>
            <div class="right_item1">人口出入时间段统计</div>
            <!-- 右边底部折线图 -->
            <div class="right_item4"></div>
        </div>
    </div>
</body>

<script src="./echarts.min.js"></script>
<script>
    // ==========================左边顶部饼图
    const myChartDom = document.querySelector('.left_item3')
    const myChart = echarts.init(myChartDom)
    const config1 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                type: 'pie',
                radius: ['0%', '50%'],
                center: ['50%', '70%'],
                data: [
                    {
                        name: '卖淫嫖娼',
                        value: 15,
                    },
                    {
                        name: '经侦嫌疑',
                        value: 15,
                    },
                    {
                        name: '重点人口',
                        value: 10,
                    },
                    {
                        name: '刑侦重点',
                        value: 5,
                    }, {
                        name: '吸毒人口',
                        value: 60,

                    }
                ]
            }
        ]
    }
    myChart.setOption(config1)

    // ====================================右边顶部圆图饼
    const myChartDom2 = document.querySelector('.right_item2')
    const myChart2 = echarts.init(myChartDom2)
    const config2 = {
        title: {
            text: '',
            subtext: '单位：岁'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                type: 'pie',
                radius: ['25%', '50%'],
                center: ['50%', '70%'],
                data: [
                    {
                        name: '18-30',
                        value: 15,
                    },
                    {
                        name: '31-40',
                        value: 15,
                    },
                    {
                        name: '41-50',
                        value: 10,
                    },
                    {
                        name: '51-60',
                        value: 5,
                    }, {
                        name: '60岁以上',
                        value: 5,
                    }
                    , {
                        name: '未标明',
                        value: 60,
                    }
                ]
            }
        ]
    }
    myChart2.setOption(config2)

    // ====================================右边中间柱形图
    const myChartDom3 = document.querySelector('.right_item3')
    const myChart3 = echarts.init(myChartDom3)
    const config3 = {
        title: {
            text: '',
            subtext: '',
            textStyle: {
                color: '#fadb71',
            }
        },

        xAxis: {
            data: ['河北', '天津', '北京', '新疆', '内蒙', '宁夏', '河南']
        },
        yAxis: {
            min: 0,
            max: 400
        },
        series: [
            {
                type: 'bar',
                center: ['50%', '30%'],
                data: [10, 50, 200, 330, 380, 320, 220]
            }
        ]
    }
    myChart3.setOption(config3)



    // ====================================右边底部折线图
    const myChartDom4 = document.querySelector('.right_item4')
    const myChart4 = echarts.init(myChartDom4)
    const config4 = {
        title: {
            text: '',
            subtext: '',
            // textStyle:{
            //     color:'#5ab310',
            // }
        },
        xAxis: {
            data: ['6.00-9.00', '10:00-12:00', '13:00-15:00', '16:00-20:00', '21:00-24:00']
        },
        yAxis: {
            min: 0,
            max: 800,

        },
        series: [
            {
                type: 'line',
                data: [800, 300, 500, 800, 300],
                smooth: true,
                textStyle: {
                    color: '#5ab310',
                }
            }
        ]
    }
    myChart4.setOption(config4)






</script>

</html>